<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 图标区 -->
      <div class="login_log">欢迎登录zz-admin</div>
      <!-- 登录表单区 -->
      <div class="form-box">
        <Form ref="loginFormRef" :model="loginForm" :rules="ruleInline">
          <FormItem prop="loginAccount">
            <Input
              prefix="ios-person-outline"
              v-model="loginForm.loginAccount"
              placeholder="请输入账号..."
              ><template #suffix>
                <Icon
                  type="ios-trash-outline"
                  v-if="loginForm.loginAccount"
                  class="fade-in"
                  @click="deleteLoginAccount"
                />
              </template>
            </Input>
          </FormItem>
          <FormItem prop="passWord">
            <Input
              prefix="ios-lock-outline"
              :type="passWordType"
              v-model="loginForm.passWord"
              placeholder="请输入密码..."
              ><template #suffix>
                <Icon
                  type="ios-trash-outline"
                  v-if="loginForm.passWord"
                  class="fade-in"
                  @click="deletePassword"
                />
                <Icon
                  type="ios-eye"
                  v-if="!passWordShowFlag"
                  class="fade-in"
                  @click="showPassWord"
                />
                <Icon
                  type="ios-eye-off"
                  v-if="passWordShowFlag"
                  class="fade-in"
                  @click="hiddenPassWord"
                />
              </template>
            </Input>
          </FormItem>
          <div class="auto-login">
            <Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
            <a>忘记密码</a>
          </div>
          <FormItem>
            <Button type="primary" long @click="login()" :loading="loginLoading"
              >登录</Button
            >
          </FormItem>
          <div class="create-user">
            <span>还没有账号？</span>
            <a>新建账号</a>
          </div>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      ruleInline: {
        loginAccount: [
          {
            required: true,
            message: '请输入账号...',
            trigger: 'change',
          },
        ],
        passWord: [
          {
            required: true,
            message: '请输入密码...',
            trigger: 'change',
          },
        ],
      },
      //登录表单数据的数据绑定对象
      loginForm: {
        loginAccount: '',
        passWord: '',
      },
      autoLogin: true,
      loginLoading: false,
      passWordType: 'password',
      passWordShowFlag: false,
    }
  },
  methods: {
    //点击登录
    async login() {
      // 表单校验
      this.$refs['loginFormRef'].validate((valid) => {
        if (!valid) {
          return false
        }
      })

      this.loginLoading = true
      let loginData = {
        loginAccount: this.loginForm.loginAccount,
        passWord: this.$TOOL.crypto.MD5(this.loginForm.passWord),
      }
      // 调用接口
      const loginRes = await this.$API.userManagement.user.login.post(loginData)
      if (loginRes.code == '01') {
        await this.loginSuccess(loginRes.data)
        this.loginLoading = false
      } else {
        this.$Message.error(loginRes.message)
        this.loginLoading = false
      }
    },
    // 登录成功
    async loginSuccess(userInfo) {
      // 登录成功 并 存储token相关信息
      this.$TOOL.session.set('token', userInfo.token)

      // 存储用户信息
      this.$TOOL.session.set('userInfo', userInfo)

      // todo:存储动态路由
      await this.createAndDealAsyncRoutes()

      // todo:记住账号密码

      this.$router.push('/layout')
      this.$Message.success('登录成功')
    },
    // 得到并存储动态路由
    async createAndDealAsyncRoutes() {
      // 通过userId调取后台接口 => 返回当前登陆人有权查看的菜单
      const menuRes =
        await this.$API.menuManagement.menu.queryTreeRightMenus.post()

      if (menuRes.code == '01') {
        // 存储菜单信息
        this.$TOOL.session.set('menus', menuRes.data)
      } else {
        return
      }
    },
    // 清除账号
    deleteLoginAccount() {
      this.loginForm.loginAccount = ''
    },
    // 清除密码
    deletePassword() {
      this.loginForm.passWord = ''
    },
    // 显示密码
    showPassWord() {
      this.passWordType = 'text'
      this.passWordShowFlag = !this.passWordShowFlag
    },
    // 隐藏密码
    hiddenPassWord() {
      this.passWordType = 'password'
      this.passWordShowFlag = !this.passWordShowFlag
    },
  },
}
</script>

<style lang="less" scoped>
/* 登录页总样式 */
.login_container {
  height: 100vh;
  background-image: url('src/assets/login2_2.jpg');
  background-size: cover; /* 或者使用 contain 或 100% 100% */
  background-repeat: no-repeat;
  background-position: center;

  /** 登录框 */
  .login_box {
    width: 350px;
    height: 450px;
    background: rgba(179, 197, 236, 0.2);
    border-radius: 10px;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(20px);
    box-shadow: 10px 30px 30px rgba(0, 0, 0, 0.1);

    .login_log {
      position: relative;
      font-size: 18px;
      font-weight: 300;
      text-align: center;
      margin-top: 50px;
      margin-left: 40px;
      padding-left: 20px;
      color: #f0e1e1;
    }
    .login_log::before {
      content: '';
      position: absolute;
      left: 0%;
      top: 40%;
      transform: translateY(-50%);
      width: 100px; /* 图标自定义宽度 */
      height: 50px; /* 图标自定义高度 */
      background-image: url('src/assets/png/tubiao.png'); /* 图标的路径 */
      /* 其他图标样式属性 */
      background-size: contain; /* 或者使用 contain 或 100% 100% */
      background-repeat: no-repeat;
      background-position: center;
    }
    .form-box {
      position: absolute;
      bottom: 100px;
      width: 100%;
      height: 200px;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
}

.ivu-form-item {
  padding: 0px 50px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  height: 40px;
}
.ivu-btn-small {
  height: 30px;
  padding: 0 7px;
  font-size: 12px;
  border-radius: 10px;
}
:deep(.ivu-input-with-prefix) {
  padding-left: 32px;
  height: 28px;
}
.ivu-input-small {
  padding: 1px 7px;
  border-radius: 3px;
}
:deep(.ivu-input-wrapper-small .ivu-input-prefix i) {
  font-size: 14px;
  line-height: 28px;
}
:deep(.ivu-input-wrapper-small .ivu-input-suffix i) {
  font-size: 14px;
  line-height: 28px;
}
:deep(.ivu-input-suffix) {
  left: auto;
  right: 4px;
}
.ivu-input-small::placeholder {
  font-size: 8px; /* 缩小的字号 */
}
:deep(.auto-login) {
  margin-bottom: 18px;
  margin-left: 50px;
  margin-right: 55px;
  text-align: left;
  font-size: 14px;
}
:deep(.ivu-checkbox-label-text) {
  padding-left: 4px;
  font-size: 14px;
}
.auto-login a {
  float: right;
}
.create-user {
  margin-bottom: 18px;
  margin-left: 50px;
  margin-right: 55px;
  text-align: center;
  font-size: 14px;
}
:deep(.ivu-form-item-error-tip) {
  position: absolute;
  font-size: 10px;
  top: 100%;
  left: 0;
  line-height: 1;
  padding-top: 4px;
  color: #c34627;
}
.fade-in {
  animation: fadeIn 0.5s forwards;
  opacity: 0;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
